<template>
  <div class="home">
    <!--    功能区域-->
    <div style="margin: 10px 0">
      <el-button type="danger" @click="openDialog">新增</el-button>
    </div>
    <!--    搜素区域-->
    <div style="margin: 10px 0">
      <!--@change事件可以获取当前改变的对象-->
      <el-select v-model="value" placeholder="Select" @change="optionClick($event)" >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
        >
        </el-option>
      </el-select>
      <!--      清空按钮 clearable-->
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable />
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    </div>
    <!--    stripe斑马纹 sortable排序-->
    <!--    创建表格-->
    <el-table :data="tableData" border stripe style="width: 100% ; ">
      <el-table-column prop="seaNewsId" label="Id"  sortable />
      <el-table-column prop="seaNewsTitle" label="标题" />
      <el-table-column prop="seaNewsContent" label="内容" >
        <template #default="scope">
<!--          设置本行的content用html语法展示-->
          <div v-html="scope.row.seaNewsContent"></div>
        </template>
      </el-table-column>
      <el-table-column prop="seaNewsAuthor" label="作者" />
      <el-table-column prop="time" label="出版时间" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <!--        插槽名.row可以获取一行的内容，-->
          <!--        如果要获取行的索引，使用插槽名.$index，注意$符号是必不可少的，否则将不起作用。-->
          <el-button type="text" size="small" @click="details(scope.row)">详情</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>

          <!--          <el-popconfirm title="确定要删除吗">弹窗提示框确定要删除吗-->
          <!--          @confirm事件单击确认按钮时触发-->
          <el-popconfirm title="确定要删除吗" @confirm="handleDelete(scope.row.seaNewsId)">
            <template #reference>
              <el-button type="text" size="small" >Delete</el-button>
            </template>
          </el-popconfirm>
        </template>

      </el-table-column>
    </el-table>

    <!--    创建分页-->
    <div style="margin: 10px 0">
      <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <!--    弹窗功能，弹窗里面创建表单-->
    <el-dialog v-model="dialogVisible" :title="title" width="50%">

      <!--      创建表单 弹窗里面的表单-->
      <el-form :model="form" label-width="120px">
        <el-form-item label="标题">
          <el-input v-model="form.seaNewsTitle" style="width: 50%"></el-input>
        </el-form-item>
<!--        富文本的内容-->
        <div id="div1"></div>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </span>
      </template>
    </el-dialog>

<!--    用来显示详情页的信息-->
    <el-dialog v-model="detailVisible" title="详情信息" width="50%">
      <el-card>
        <div v-html="detail.seaNewsContent" ></div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import {ref} from "vue";
import E from 'wangeditor'
let editor; //富文本编辑器 去wangEditor官网查看
let editor1;
export default {
  name: 'News',
  data(){
    return{
      search :'',
      currentPage : 1,
      pageSize :3,
      total :0,
      option:'',
      //设置弹窗为false，不显示
      dialogVisible :false,
      detailVisible :false,
      detail :{},
      title:'',
      options: ref([
        {
          value: 'id',
          label: 'id',
        },
        {
          value: 'title',
          label: 'title',

        },

      ]),
      value: ref(''),
      form :{

      },
      tableData: [
        {

        },

      ],

    }
  },
  created() {
    this.load()
  },
  //页面中所有元素加载完毕之后执行此方法
  // mounted() {
  //
  // },
  methods :{
    //将后台查询的结果放到前台显示
    load(){
      request.get("/api/news",{
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search,
          option :this.option

        }
      }).then(res=>{
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    // 操作下的编辑按钮 修改数据
    handleEdit(row){
      // JSON.stringify()【从一个对象中解析出字符串】
      //JSON.parse()【从一个字符串中解析出json对象】
      //因为传入的row是一行对象，所以先将row解析成字符串，再将字符串解析成JSON对象
      this.form=JSON.parse(JSON.stringify(row))
      this.dialogVisible =true
      this.$nextTick(()=>{//解决了初始化节点已存在编辑器实例，无法重复创建编辑器问题，如果为空 创建editor实例，不为空先销毁在重新创建一个新实例
        if(editor==null){
          editor = new E('#div1')//富文本编辑器 关联弹窗里面的div new一个editor对象
          editor.config.uploadImgServer = 'http://localhost:8090/file/editor/upload'
          editor.config.uploadFileName = 'file'//设置上传参数名称
          editor.create()
          editor.txt.html(row.seaNewsContent)//设置富文本编辑器文本的内容为本行的content，以html展示
        }else {
          editor.destroy()
          editor = new E('#div1')//富文本编辑器 关联弹窗里面的div new一个editor对象
          editor.config.uploadImgServer = 'http://localhost:8090/file/editor/upload'
          editor.config.uploadFileName = 'file'//设置上传参数名称
          editor.create()
          editor.txt.html(row.seaNewsContent)//设置富文本编辑器文本的内容为本行的content，以html展示
        }

      })

    },


    //打开弹窗
    openDialog(){
      this.dialogVisible=true
      this.form ={}
      this.$nextTick(()=>{
        if(editor==null){
          editor = new E('#div1')//富文本编辑器 关联弹窗里面的div new一个editor对象
          editor.txt.html("")
          editor.config.uploadImgServer = 'http://localhost:8090/file/editor/upload'
          editor.config.uploadFileName = 'file'//设置上传参数名称
          editor.create()
        }else{
          editor.destroy()
          editor = new E('#div1')//富文本编辑器 关联弹窗里面的div new一个editor对象
          editor.txt.html("")
          editor.config.uploadImgServer = 'http://localhost:8090/file/editor/upload'
          editor.config.uploadFileName = 'file'//设置上传参数名称
          editor.create()
        }

      })
    },


    //插入数据
    save(){
      this.form.seaNewsContent = editor.txt.html()//编辑器里面的值赋值到content实体中

      //如果表单里有id说明是更新操作，没有说明是插入操作
      if(this.form.seaNewsId){

        request.put('/api/news',this.form).then(res=>{
          console.log(res);
          if(res.code == '0'){
            this.$message({
              type : 'success',
              message :'更新成功'
            })
            this.dialogVisible = false
          }
          else {
            this.$message({
              type : 'error',
              message : res.msg
            })
          }
          this.load()
        })
        //重新刷新表格中的数据

      }
      else {
        let user =sessionStorage.getItem('user') || "{}"
        let userJson = JSON.parse(user)
        this.form.seaNewsAuthor = userJson.username
        request.post("/api/news",this.form).then(res =>{
          if(res.code == '0'){
            this.$message({
              type : 'success',
              message :'插入成功'
            })
            this.dialogVisible = false
          }
          else {
            this.$message({
              type : 'error',
              message : res.msg
            })
          }
          this.load()
        })

      }



    },

    // 删除表格中的某一行
    handleDelete(id){

      request.delete('/api/news/'+id).then(res=>{
        console.log(res);
        if(res.code == '0'){
          this.$message({
            type : 'success',
            message :'删除成功'
          })
          this.dialogVisible = false
        }
        else {
          this.$message({
            type : 'error',
            message : res.msg
          })
        }
        this.load()
      })

    },

    // 改变每页的个数 ,element-plus提供了改变之后pageSize的值
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.load()

    },
    //改变当前页 element-plus提供了改变之后pageSize的值
    handleCurrentChange(pageNum){

      this.currentPage = pageNum
      this.load()

    },



    optionClick(id){
      this.option=id

    }
    ,

    //详情页
    details(row){
      //获取本行的所有信息 传给detail  上放弹窗调用detail.content显示详情信息
      this.detail =row
      this.detailVisible =true

    }


  },
  components: {


  },

}
</script>
